<template>
	<view class="container">
		<!-- 商品列表 -->
		<view class="scroll-container">
			<view class="product-list">
				<view class="product-item" v-for="(item, index) in productList" :key="index" @tap="goToDetail(item.id)">
					<image class="product-image" :src="item.imgList[0].imagePath1" mode="aspectFill" />
					<view class="product-info">
						<view class="product-title">{{ item.productName }}</view>
						<view class="product-stats">
							<text class="commission">赚¥ {{ item.productBack }}</text>
							<text class="commission-rate">佣金{{ formatPercentage(item.productProfit) }}%</text>
							<text class="price">价格: {{ item.productPrice }}</text>
						</view>
						<view class="bth-banner">
							<text class="bth-text">免费领视频</text>
						</view>
					</view>
				</view>

				<!-- 加载状态 -->
				<view class="loading-state">
					<view class="loading" v-if="loading">加载中...</view>
					<view class="no-more" v-if="noMore">已经到底了~</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		listProduct
	} from '@/api/products/product'

	export default {
		data() {
			return {
				productList: [],
				pageNum: 1,
				pageSize: 10,
				total: 0,
				loading: false,
				noMore: false
			}
		},
		onLoad() {
			this.getProductList()
		},
		// 页面触底，加载更多
		onReachBottom() {
			this.loadMore()
		},
		methods: {
			// 格式化百分比，保留最多2位小数，去掉末尾的0
			formatPercentage(value) {
				if (!value && value !== 0) return '0'
				return parseFloat((value * 100).toFixed(2))
			},
			getProductList() {
				if (this.noMore || this.loading) return
				this.loading = true
				const query = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					sortType: 'product_profit', // 佣金率排序
					sortOrder: 'desc'
				}
				console.log('Loading products, page:', this.pageNum, 'query:', query)
				listProduct(query).then(res => {
					console.log('Products loaded:', res.rows.length, 'total:', res.total)
					if (this.pageNum === 1) {
						this.productList = res.rows
					} else {
						this.productList = [...this.productList, ...res.rows]
					}
					this.total = res.total
					this.noMore = this.productList.length >= this.total
					console.log('Product list length:', this.productList.length, 'noMore:', this.noMore)
				}).finally(() => {
					this.loading = false
				})
			},
			loadMore() {
				console.log('loadMore triggered, loading:', this.loading, 'noMore:', this.noMore, 'pageNum:', this.pageNum)
				if (this.loading || this.noMore) return
				this.pageNum++
				this.getProductList()
			},
			goToDetail(id) {
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}`
				})
			}
		}
	}
</script>

<style scoped>
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-color: #f5f5f5;
	}


	/* 可滚动容器 */
	.scroll-container {
		flex: 1;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}

	/* 商品列表 */
	.product-list {
		padding: 10px 12px;
	}

	.product-item {
		display: flex;
		background-color: #fff;
		border-radius: 12px;
		margin-bottom: 12px;
		padding: 12px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
		transition: transform 0.2s;
	}

	.product-item:active {
		transform: scale(0.98);
	}

	.product-image {
		width: 100px;
		height: 100px;
		border-radius: 8px;
		flex-shrink: 0;
	}

	.product-info {
		flex: 1;
		margin-left: 12px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
	}

	.product-title {
		font-size: 14px;
		line-height: 1.4;
		margin-bottom: 8px;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		color: #333;
		font-weight: bold;
	}

	.product-stats {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-end;
		margin-bottom: 8px;
		gap: 15px;
	}

	.commission,
	.commission-rate,
	.price {
		font-size: 12px;
		color: #666;
		text-align: left;
	}

	.commission {
		color: #e74c3c;
		font-weight: bold;
		font-size: 16px;
	}

	.price {
		color: #ff9500;
		font-weight: bold;
	}

	/* bth长条 */
	.bth-banner {
		background-color: #ff9500;
		border-radius: 15px;
		padding: 6px 12px;
		text-align: center;
		margin-top: 5px;
	}

	.bth-text {
		font-weight: bold;
		font-size: 14px;
		color: #fff;
	}

	/* 加载状态 */
	.loading-state {
		padding: 20px 0;
		text-align: center;
	}

	.loading {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #999;
	}

	.no-more {
		font-size: 14px;
		color: #999;
		text-align: center;
		padding: 15px 0;
	}
</style>
